<template>
	<view class="homeLayout page-background">

		<!-- 自定义导航栏 -->
		<custom-nav-bar title="推荐"></custom-nav-bar>

		<!-- 轮播图 -->
		<view class="banner">
			<swiper indicator-dots circular indicator-color="rgba(255, 255, 255, 0.5)" indicator-active-color="white"
				:autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="item in bannerList" :key="item._id">
					<navigator 
					class="link"
					v-if="item.target === 'miniProgram'"
					target="miniProgram"
					:app-id="item.appid"
					:url="`/pages/class-list/class-list?${item.url}`">
						<image :src="item.picurl" mode="aspectFill"></image>
					</navigator>
					
					<navigator
					class="link"
					v-else
					:url="`/pages/class-list/class-list?${item.url}`">
						<image :src="item.picurl" mode="aspectFill"></image>
					</navigator>
					
				</swiper-item>
			</swiper>
		</view>

		<!-- 公共通知 -->
		<view class="notice">
			<view class="left">
				<uni-icons type="sound-filled" size="20"></uni-icons>
				<text class="text">公告</text>
			</view>
			<view class="center">
				<swiper vertical circular :autoplay="true" interval="1500" duration="300">
					<swiper-item v-for="(item, index) in noticeList" :key="item._id">
						<navigator :url="'/pages/notice/detail?id=' + item._id">
							{{item.title}}
						</navigator>
					</swiper-item>

				</swiper>
			</view>
			<view class="right">
				<uni-icons type="right" size="16" color="#333"></uni-icons>
			</view>
		</view>

		<!-- 每日推荐 -->
		<view class="select">
			<common-title>
				<!-- <template v-slot:name> -->
				<!-- 下一行和上一行等价 -->
				<template #name>每日推荐</template>
				<template #custom>
					<view class="date">
						<uni-icons type="calendar" size="18"></uni-icons>
						<view class="text">
							<uni-dateformat :date="Date.now()" format="dd号"></uni-dateformat>
						</view>
					</view>
				</template>

			</common-title>
			<view class="content">
				<scroll-view scroll-x>
					<view class="box" v-for="item in randomWallpaperList" 
					:key="item._id" 
					@click="toPreviewPage(item._id)">
						<image :src="item.smallPicurl" mode="aspectFill"></image>
					</view>
				</scroll-view>
			</view>
		</view>

		<!-- 专题精选 -->
		<view class="theme">

			<common-title>
				<template #name>
					专题精选
				</template>
				<template #custom>
					<navigator  class="more" url="/pages/classify/classify" open-type="reLaunch">More+</navigator>
				</template>
			</common-title>

			<view class="content">
				<theme-item v-for="item in classList" :key="item._id" :item="item">

				</theme-item>
				<theme-item :isMore="true"></theme-item>
			</view>
		</view>


	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { accessKey } from '@/common/constants/api.js'
	import {
		apiGetBannerData, apiGetNotice,
		apiGetRandomImage, apiGetClassList
	} from '../../api/apis';
	import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
	import { IMAGES_BY_CATEGORY_STORAGE } from '../../common/constants/storage';
	const toPreviewPage = (wallpaperId) => {
	// 设置缓存
	uni.setStorageSync(IMAGES_BY_CATEGORY_STORAGE, randomWallpaperList.value)
		
	// 跳转到详情页
	uni.navigateTo({
		url: `/pages/preview/preview?id=${wallpaperId}`,
	})
	}

	onLoad(() => {
		getBannerImage()
		getRandomImage()
		getNotice()
		getClassList()
	})

	// 分享给好友
	onShareAppMessage(e => {
		console.log('index.vue -> e:', e)
		return {
			title: '咸虾米壁纸',
			path: 'pages/classify/classify'
		}
	})

	// 分享到朋友圈
	onShareTimeline(() => {
		return {
			title: '咸虾米壁纸~~~'
		}
	})

	const bannerList = ref([])
	const getBannerImage = async () => {
		const res = await apiGetBannerData()

		bannerList.value = res.data
	}

	const randomWallpaperList = ref([])
	const getRandomImage = async () => {
		const res = await apiGetRandomImage()
		randomWallpaperList.value = res.data
	}


	const noticeList = ref([])
	const getNotice = async () => {
		// 获取被推荐的公告
		// const res = await apiGetNotice({ select: true })
		// 获取所有公告信息
		const res = await apiGetNotice()
		noticeList.value = res.data
	}

	const classList = ref([])
	const getClassList = async () => {
		const res = await apiGetClassList({ select: true })
		classList.value = res.data
	}
</script>

<style lang="scss">
	.homeLayout {
		.banner {
			// border: 1rpx solid red;
			padding: 30rpx 0;
			width: 750rpx;

			swiper {
				width: 100%;
				height: 340rpx;

				swiper-item {
					// width: 100%;
					// height: 100%;
					padding: 0 30rpx;
					.link {
						width: 100%;
						height: 100%;
						image {
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
						}
					}
					
				}
			}

		}

		.notice {
			width: 690rpx;
			height: 80rpx;
			line-height: 80rpx;
			background-color: #f9f9f9;
			margin: 0 auto;
			// padding: 0 30rpx;
			border-radius: 80rpx;
			display: flex;

			// justify-content: center;
			.left {
				width: 140rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				::v-deep {
					.uni-icons {
						color: $brand-theme-color !important;
					}
				}

				.text {
					color: $brand-theme-color;
					font-weight: 600;
					font-size: 29rpx;
				}
			}

			.center {
				flex: 1; // 该元素自动占满空余的空间

				swiper {
					height: 100%;

					// swiper-item {
					// 上一行和下一行等价
					&-item {
						height: 100%;
						font-size: 30rpx;
						color: #666;
						overflow: hidden;
						white-space: nowrap; // 强制文本在一行内显示，禁止自动换行
						text-overflow: ellipsis;
					}
				}
			}

			.right {
				width: 70rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.select {
			padding-top: 50rpx;

			.content {
				width: 720rpx;
				margin-left: 30rpx;
				margin-top: 30rpx;

				scroll-view {
					white-space: nowrap;

					.box {
						display: inline-block;
						width: 200rpx;
						height: 430rpx;
						margin-right: 15rpx;

						image {
							width: 100%;
							height: 100%;
							border-radius: 10rpx;
						}
					}

					.box:last-child {
						margin-right: 30rpx;
					}
				}
			}

			.date {
				color: $brand-theme-color;
				display: flex;
				align-items: center;

				::v-deep {
					.uni-icons {
						color: $brand-theme-color !important;
					}
				}

				.text {
					margin-left: 5rpx;
				}
			}
		}

		.theme {
			padding-top: 50rpx;

			.more {
				font-size: 32rpx;
				color: #888;
				// color: gray;
			}

			.content {
				margin-top: 30rpx;
				padding: 30rpx;
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 15rpx;
			}
		}
	}
</style>